<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>顶部导航</title>
</head>
<body>
<!-- 顶部导航 -->
<header class="bg-white shadow-sm sticky top-0 z-30">
    <div class="flex items-center justify-between p-4">
        <div class="flex items-center">

        </div>
        <div class="flex items-center gap-4">
            <button class="relative text-neutral-dark hover:text-primary">
                <i class="fa-solid fa-bell text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center text-white text-xs">3</span>
            </button>
            <button class="relative text-neutral-dark hover:text-primary">
                <i class="fa-solid fa-envelope text-xl"></i>
                <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full flex items-center justify-center text-white text-xs">5</span>
            </button>
            <div class="h-8 w-px bg-gray-200 mx-2"></div>
            <div class="flex items-center gap-2">
                <img src="https://picsum.photos/id/1005/200/200" alt="管理员头像"
                     class="w-8 h-8 rounded-full object-cover">
                <span class="md:inline text-sm font-medium">系统管理员</span>
            </div>
        </div>
    </div>
</header>
</body>
</html>